<template>
  <div class="container-fluid">
    <div class="container">
      <el-card shadow="always">
        <el-steps :active="step" simple>
          <el-step title="邮箱验证" icon="el-icon-info"></el-step>
          <el-step title="设置密码" icon="el-icon-edit-outline"></el-step>
          <el-step title="注册成功" icon="el-icon-check"></el-step>
        </el-steps>
        <el-form :rules="registerFormRules" :model="form" ref="form" v-loading="loading" label-width="80px"
                 style="width: 500px; margin: auto; padding-top: 60px;">
          <el-form-item prop="email" label="邮箱" v-if="step == 1">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item prop="verificationCode" label="验证码" v-if="step == 1">
            <el-input v-model="form.verificationCode">
              <template slot="append">
                <el-button :loading="getVerificationCodeLoading" style="min-width: 100px;" @click="getVerificationCode">
                  {{ btnText }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="mpassword" label="密码" v-if="step == 2">
            <el-input type="password" v-model="form.mpassword"></el-input>
          </el-form-item>
          <el-form-item prop="mrePassword" label="确认密码" v-if="step == 2">
            <el-input type="password" v-model="form.mrePassword"></el-input>
          </el-form-item>

          <el-form-item v-if="step < 3">
            <el-button type="primary" @click="nextStep" style="width: 100%;">下一步</el-button>
          </el-form-item>

        </el-form>

        <transition name="el-zoom-in-top">
          <el-row v-if="registerSubmitted && regSuccess">
            <el-col>
              <el-result icon="success" title="注册成功" subTitle="注册成功，点击确认前往个人中心完善个人信息。">
                <template slot="extra">
                  <el-button type="text" @click="toMember">确认</el-button>
                </template>
              </el-result>
            </el-col>
          </el-row>
          <el-row v-if="registerSubmitted && !regSuccess">
            <el-col>
              <el-result icon="error" title="注册失败" subTitle="请刷新页面后重新注册。"></el-result>
            </el-col>
          </el-row>
        </transition>
      </el-card>
    </div>
  </div>
</template>

<script>

import {sendAuthCode} from '@/api/common'
import {register} from '@/api/member/register'
import {setToken} from "@/utils/auth";

export default {
  name: "RegisterComponent",
  data() {
    return {
      passwordChecked: false,
      emailChecked: false,
      form: {
        email: '',
        verificationCode: '',
        mpassword: '',
        mrePassword: ''
      },
      step: 1,
      regSuccess: false,
      loading: false,
      btnText: '获取验证码',
      coldDownInterval: null,
      coldDown: 60,
      getVerificationCodeLoading: false,
      registerSubmitted: false,
      registerFormRules: {
        email: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入邮箱",
          },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],

        verificationCode: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入邮箱验证码",
          },
        ],

        mpassword: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入登录密码",
          },
        ],

        mrePassword: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请再次输入登录密码",
          },
        ],
      },
    };
  },
  methods: {
    toMember() {
      this.$router.push({ name: 'memberCenter'})
    },
    // 获取验证码
    getVerificationCode() {
      this.coldDown = 60
      let that = this
      sendAuthCode(this.form.email).then(() => {
        this.getVerificationCodeLoading = true
        this.coldDownInterval = setInterval(function () {
          if (that.coldDown < 1) {
            that.getVerificationCodeLoading = false
            clearInterval(that.coldDownInterval)
            that.btnText = '获取验证码'
          } else {
            that.coldDown--
            that.btnText = that.coldDown + "s"
          }
        }, 1000);
        this.emailChecked = true
      })
    },
    // 下一步
    nextStep() {
      if (this.step == 1) {
        if (this.emailChecked && this.form.verificationCode.length == 6) {
          this.step++
        } else {
          if (!this.emailChecked) {
            this.$message.warning("请获取验证码")
          } else if (this.form.verificationCode.length != 6){
            this.$message.warning("请输入6位验证码")
          }
        }
      } else if (this.step == 2) {
        // if (this.passwordChecked) {
        //   this.step++
        //   this.doSubmit()
        // } else {
        // TODO 请填写密码
        console.log('请填写密码')
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.step++
            this.doSubmit()
          } else {
            this.$message.warning("请填写密码")
          }
        })
        // }
      }

      if (this.step > 3) {
        this.step = 3
      }
    },
    // 上一步
    pervStep() {
      if (this.step < 1) {
        this.step = 1
      } else {
        this.step--
      }
    },
    // 提交注册
    doSubmit() {

      this.loading = true
      register(this.form).then(res => {
        if (res.code == 200) {
          this.regSuccess = true
          this.loading = false
          // TODO 将版本号设置到cookie
          // TODO 保存登录信息
          setToken(res.data.access_token)
          this.$store.dispatch("getMemberInfo").then(() => {
            this.$store.commit('set_login', '1')
          })
        } else {
          this.regSuccess = false
          this.loading = false
        }
      }).catch(() => {
        // this.$message.error('未知错误，请刷新页面后重试。');
        this.loading = false
      })
      this.registerSubmitted = true
      this.step++
    }
  }
}
</script>

<style lang="scss" scoped>

.container-fluid {
  width: 100%;
  background-color: #1D3E5C;
  min-height: calc(100vh - 60px);

  .container {
    padding-top: 100px;
  }
}

@media screen and (max-width: 1280px) {
  .container {
    width: 1000px;
  }
}

@media screen and (min-width: 1281px) {
  .container {
    width: 1200px;
  }
}
</style>
